<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
    <!--Setting-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="涛哥的博客">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="theme-version" content="1.2.3">
    <meta name="root" content="/">
    <link rel="dns-prefetch" href="https://jaredtao.github.io">
    <!--SEO-->

<meta name="keywords" content="Qt,Qml,QtQuick,组件化编程" />


<meta name="description" content="
简介
效果预览
源码
原理说明
需求说明
原理
Qml对象作用域
QObject对象树


实现
最小改动
获取焦点区域
找到对象
取坐标
向导页
向导组件
向导数据源







简介很多..." />


<meta name="robots" content="all" />
<meta name="google" content="all" />
<meta name="googlebot" content="all" />
<meta name="verify" content="all" />
    <!--Title-->

<title>
    
    玩转Qml(18)-用户向导 |
    
    涛哥的博客
</title>

<link rel="alternate" href="/atom.xml" title="涛哥的博客" type="application/atom+xml">


<link rel="icon" href="/favicon.ico">

    


<link rel="stylesheet" href="/css/bootstrap.min.css?rev=3.3.7.css">
<link rel="stylesheet" href="/css/font-awesome.min.css?rev=4.7.0.css">
<link rel="stylesheet" href="/css/style.css?rev=@@hash.css">

    
<div class="hide">
    <script type="text/javascript">
    var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cspan class='cnzz_stat_icon_1263868967 hide' %3E%3Cscript%20src%3D%22https%3A%2F%2Fs95.cnzz.com%2Fz_stat.php%3Fweb_id%3D1272564536%22%3E%3C%2Fscript%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1263868967%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
    </script>
</div>




    

<script>
(function() {
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>

<meta name="generator" content="Hexo 4.2.1"></head>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->
<body>
    <header class="main-header"  style="background-image:url(
    http://snippet.shenliyang.com/img/banner.jpg)"
     >
    <div class="main-header-box">
        <a class="header-avatar" href="/" title='JaredTao'>
            <img src="/img/avatar.jpg" alt="logo头像" class="img-responsive center-block">
        </a>
        <div class="branding">
            <!--<h2 class="text-hide">Snippet主题,从未如此简单有趣</h2>-->
            
            <h2>
                单枪匹马亦对饮，历经磨难记初心
            </h2>
            
        </div>
    </div>
</header>
    <nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header"><span class="nav-toggle-button collapsed pull-right" data-toggle="collapse" data-target="#main-menu" id="mnav">
                        <span class="sr-only"></span>
                        <i class="fa fa-bars"></i>
                    </span>
                    <a class="navbar-brand" href="https://jaredtao.github.io">
                        涛哥的博客</a>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
                        
                        <li role="presentation" class="text-center">
                            <a href="/"><i class="fa "></i>
                                首页</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/玩转Qt/"><i class="fa "></i>
                                玩转Qt</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/玩转Qml/"><i class="fa "></i>
                                玩转Qml</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/玩转QtQuick/"><i class="fa "></i>
                                玩转QtQuick</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/涛哥的博客/"><i class="fa "></i>
                                涛哥的博客</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/archives/"><i class="fa "></i>
                                时间轴</a>
                        </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
    <section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content m-post">
                    <p id="process"></p>
<article class="post">
    <div class="post-head">
        <h1 id="玩转Qml(18)-用户向导">
            
            玩转Qml(18)-用户向导
            
        </h1>
        <div class="post-meta">
    
    <span class="categories-meta fa-wrap">
        <i class="fa fa-folder-open-o"></i>
        <a class="category-link" href="/categories/%E7%8E%A9%E8%BD%ACQml/">玩转Qml</a>
    </span>
    
    
    <span class="fa-wrap">
        <i class="fa fa-tags"></i>
        <span class="tags-meta">
            
            <a class="tag-link" href="/tags/Qml/" rel="tag">Qml</a> <a class="tag-link" href="/tags/Qt/" rel="tag">Qt</a> <a class="tag-link" href="/tags/QtQuick/" rel="tag">QtQuick</a> <a class="tag-link" href="/tags/%E7%BB%84%E4%BB%B6%E5%8C%96%E7%BC%96%E7%A8%8B/" rel="tag">组件化编程</a>
            
        </span>
    </span>
    
    
    
    <span class="fa-wrap">
        <i class="fa fa-clock-o"></i>
        <span class="date-meta">
            2020/11/10</span>
    </span>
    
    <span class="fa-wrap">
        <i class="fa fa-eye"></i>
        <span id="busuanzi_value_page_pv"></span>
    </span>
    
    
</div>
        
        
    </div>
    
<div id="post-gallery">
    
    <img src="/images/Qml18/wizard.gif" alt="gallery-img" class="gallery">
    
</div>

    <div class="post-body post-content">
        <ul>
<li><a href="#简介">简介</a></li>
<li><a href="#效果预览">效果预览</a></li>
<li><a href="#源码">源码</a></li>
<li><a href="#原理说明">原理说明</a><ul>
<li><a href="#需求说明">需求说明</a></li>
<li><a href="#原理">原理</a><ul>
<li><a href="#qml对象作用域">Qml对象作用域</a></li>
<li><a href="#qobject对象树">QObject对象树</a></li>
</ul>
</li>
<li><a href="#实现">实现</a><ul>
<li><a href="#最小改动">最小改动</a></li>
<li><a href="#获取焦点区域">获取焦点区域</a><ul>
<li><a href="#找到对象">找到对象</a></li>
<li><a href="#取坐标">取坐标</a></li>
<li><a href="#向导页">向导页</a></li>
<li><a href="#向导组件">向导组件</a></li>
<li><a href="#向导数据源">向导数据源</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p>很多现代化的软件，都会有向导功能，相信大家并不陌生。</p>
<p>“用户向导”的作用，可以帮助新用户快速了解产品，也可以用来提醒用户该如何操作。</p>
<p>这次涛哥就分享一个Qml制作“用户向导”的方案。</p>
<h2 id="效果预览"><a href="#效果预览" class="headerlink" title="效果预览"></a>效果预览</h2><p>看一下最终效果</p>
<p><img src="/images/Qml18/wizard.png" alt="预览"><br><img src="/images/Qml18/wizard.gif" alt="预览"></p>
<p>在整个软件界面上，覆盖一层遮罩，只保留一部分镂空区域，并用箭头指向镂空区域，</p>
<p>以此,将用户的眼球聚焦到镂空区域，并用适当的文字,说明镂空区域的作用。</p>
<p>这个遮罩层是不能操作到软件界面的，点击任意区域，会转到下一步的向导，直到最后向导退出。</p>
<h2 id="源码"><a href="#源码" class="headerlink" title="源码"></a>源码</h2><p>《玩转Qml》系列文章，配套了一个优秀的开源项目:TaoQuick</p>
<p>github <a href="https://github.com/jaredtao/TaoQuick" target="_blank" rel="noopener">https://github.com/jaredtao/TaoQuick</a></p>
<p>访问不了或者速度太慢，可以用国内的镜像网站gitee</p>
<p><a href="https://gitee.com/jaredtao/TaoQuick" target="_blank" rel="noopener">https://gitee.com/jaredtao/TaoQuick</a></p>
<h2 id="原理说明"><a href="#原理说明" class="headerlink" title="原理说明"></a>原理说明</h2><p>向导的实现方案有很多，比如贴图之类的。按不同的需求，方案也不尽相同。</p>
<p>这里先列一个涛哥的需求，再讨论方案才有意义。</p>
<h3 id="需求说明"><a href="#需求说明" class="headerlink" title="需求说明"></a>需求说明</h3><ul>
<li><p>窗口大小不固定</p>
</li>
<li><p>焦点区域可以是Qml界面中的任意可视组件</p>
</li>
<li><p>向导功能要独立实现，且对已有代码改动最小</p>
</li>
</ul>
<h3 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h3><p>遮罩的制作，在Qml中就是几个半透明的Rectangle拼在一起，附带一个顶层MouseArea，</p>
<p>将所有鼠标事件都过滤掉，这些都比较简单。</p>
<p>焦点区域才是本文的核心。</p>
<h4 id="Qml对象作用域"><a href="#Qml对象作用域" class="headerlink" title="Qml对象作用域"></a>Qml对象作用域</h4><p>先来说一下Qml中的对象作用域吧。</p>
<p>如果你阅读过《Qml Book》或者有一定的Qml经验，就知道Qml中的对象，都是通过id相互引用的。</p>
<p>像html / Android，都有类似findElementById这样的接口，获取任意的组件。</p>
<p>在Qml，省去了find这一步，可以直接使用id进行访问。</p>
<p>不过呢，Qml这个id的可访问性，不是任何场景都能直接用的，有诸多情况下，不能直接使用, 例如：</p>
<ul>
<li><p>平级的两个组件，它们的子组件不能互相访问到（同一个文件作用域中的除外）</p>
</li>
<li><p>各种View的delegate中的组件id，view外部不能直接访问(这是因为delegate有多个实例的情况下，id不能唯一标识)</p>
</li>
<li><p>Loader/Component动态加载后的子组件，不能被直接访问（动态加载，都不知道它什么时候创建，当然不能用它）</p>
</li>
</ul>
<p>诸如此类，都不能直接访问。</p>
<p>扩展说明:</p>
<p>  顶层组件的id，可以被所有子组件访问，因此可以用来存储全局对象；</p>
<p>  Qml单例组件，或者C++上下文对象，也可以被所有子组件访问。</p>
<p>  这两种方式也可以用来实现向导功能，有兴趣的读者可自己探索。</p>
<h4 id="QObject对象树"><a href="#QObject对象树" class="headerlink" title="QObject对象树"></a>QObject对象树</h4><p>Qml中的所有可视化组件，大都是继承于Item，Item的继承关系是 Item ==&gt; QQuickItem ==&gt; QObject</p>
<p>因此呢，Qml中的所有对象，都在一个QObject树上，具有父子关系。</p>
<p>我们可以从任意节点，向上找到根节点，也可以通过根节点的findChild的方式，找到任意一个带objectName的节点。</p>
<p>涛哥的向导方案，便是基于此实现。</p>
<h3 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h3><h4 id="最小改动"><a href="#最小改动" class="headerlink" title="最小改动"></a>最小改动</h4><p>在已有的Qml代码中，对于想当作焦点区域的组件，最小改动是增加一个objectName</p>
<p>例如涛哥想把已有的标题栏按钮，作为焦点区域：</p>
<p>改动前:</p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">...</span><br><span class="line">      <span class="title">SkinBtn</span> &#123;</span><br><span class="line">          <span class="attribute">width</span>: <span class="number">24</span></span><br><span class="line">          <span class="attribute">height</span>: <span class="number">24</span></span><br><span class="line">          <span class="attribute">anchors.verticalCenter</span>: <span class="built_in">parent</span>.verticalCenter</span><br><span class="line">      &#125;</span><br><span class="line">...</span><br></pre></td></tr></table></figure>

<p>改动后:</p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">...</span><br><span class="line">      <span class="title">SkinBtn</span> &#123;</span><br><span class="line">          <span class="attribute">width</span>: <span class="number">24</span></span><br><span class="line">          <span class="attribute">height</span>: <span class="number">24</span></span><br><span class="line">          <span class="attribute">anchors.verticalCenter</span>: <span class="built_in">parent</span>.verticalCenter</span><br><span class="line">          <span class="attribute">objectName</span>: <span class="string">"skinBtn"</span></span><br><span class="line">      &#125;</span><br><span class="line">...</span><br></pre></td></tr></table></figure>

<h4 id="获取焦点区域"><a href="#获取焦点区域" class="headerlink" title="获取焦点区域"></a>获取焦点区域</h4><h5 id="找到对象"><a href="#找到对象" class="headerlink" title="找到对象"></a>找到对象</h5><p>像前面的组件，只要有了objectName，就可以从任意位置获取到它了</p>
<p>这需要一点C++代码扩展</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">QQuickItem *<span class="title">getObject</span><span class="params">(QObject * pRootObject, <span class="keyword">const</span> QString &amp;targetObjName)</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (!pRootObject) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">nullptr</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> pRootObject-&gt;findChild&lt;QQuickItem *&gt;(targetObjName);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>通过findChild就可以拿到目标对象了, rootObject是根节点，可以从任意节点向上找到，</p>
<p>也可以通过QQmlContex直接获取到。</p>
<h5 id="取坐标"><a href="#取坐标" class="headerlink" title="取坐标"></a>取坐标</h5><p>找到了对象，就可以计算它的坐标，用于向导了。</p>
<p>为了方便计算，同时避免处理繁杂的父子关系，可以直接把坐标映射到顶层窗口。向导的坐标也以顶层窗口为准即可。</p>
<p>这里进一步封装了C++代码,直接计算好坐标</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">QRect <span class="title">getItemGeometryToScene</span><span class="params">(<span class="keyword">const</span> QString &amp;targetObjName)</span> <span class="keyword">const</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (!pRootObject) &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;&#125;;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">auto</span> pItem = pRootObject-&gt;findChild&lt;QQuickItem *&gt;(targetObjName);</span><br><span class="line">    <span class="keyword">if</span> (pItem) &#123;</span><br><span class="line">        <span class="keyword">if</span> (pItem-&gt;parentItem()) &#123;</span><br><span class="line">            <span class="comment">//如果有父节点，调用父节点的mapToScene将坐标映射到顶层窗口</span></span><br><span class="line">            <span class="keyword">auto</span> pos = pItem-&gt;parentItem()-&gt;mapToScene(pItem-&gt;position());</span><br><span class="line">            <span class="keyword">return</span> QRectF &#123; pos.x(), pos.y(), pItem-&gt;width(), pItem-&gt;height() &#125;.toRect();</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="comment">//如果没有父节点，坐标本身就是相对顶层窗口的</span></span><br><span class="line">            <span class="keyword">return</span> pItem-&gt;boundingRect().toRect();</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> &#123;&#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>完整的代码，可以在TaoQuick项目中看到, 封装了一个QuickTool类，</p>
<p>所在路径是TaoQuick/3rdparty/TaoCommon/QuickTool</p>
<h5 id="向导页"><a href="#向导页" class="headerlink" title="向导页"></a>向导页</h5><p>接下来就是封装一个向导页面了,遮罩围绕在焦点四周，同时带上箭头和文字说明即可</p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//CusWizardPage.qml</span></span><br><span class="line"></span><br><span class="line">import QtQuick <span class="number">2.9</span></span><br><span class="line">import QtQuick.Controls <span class="number">2.2</span></span><br><span class="line"> import QtGraphicalEffects <span class="number">1.0</span></span><br><span class="line">import <span class="string">".."</span></span><br><span class="line">import <span class="string">"../.."</span></span><br><span class="line"></span><br><span class="line"><span class="class">Item </span>&#123;</span><br><span class="line"><span class="symbol">    id:</span> pageItem</span><br><span class="line"><span class="symbol">    z:</span> <span class="number">998</span></span><br><span class="line">    anchors.fill: parent</span><br><span class="line">    property string wizardName</span><br><span class="line">    property string wizardDescript</span><br><span class="line">    property string targetObjectName</span><br><span class="line">    property int pageType: pageTypeDown</span><br><span class="line"></span><br><span class="line">    property color maskColor: <span class="string">"black"</span></span><br><span class="line">    property real maskOpacity: <span class="number">0.75</span></span><br><span class="line"></span><br><span class="line">    property rect focusRect</span><br><span class="line"></span><br><span class="line">    <span class="comment">//int 做枚举，定义4种方向的箭头</span></span><br><span class="line">    readonly property int pageTypeDown: Qt.DownArrow</span><br><span class="line">    readonly property int pageTypeUp: Qt.UpArrow</span><br><span class="line">    readonly property int pageTypeLeft: Qt.LeftArrow</span><br><span class="line">    readonly property int pageTypeRight: Qt.RightArrow</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    Component.onCompleted: &#123;</span><br><span class="line">        <span class="comment">//组件创建时，通过C++扩展，获取到焦点区域坐标</span></span><br><span class="line">        var rect = quickTool.getItemGeometryToScene(targetObjectName)</span><br><span class="line">        focusRect = rect</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//焦点区域的同步item,用来给四周的组件定位</span></span><br><span class="line">    <span class="class">Item </span>&#123;</span><br><span class="line"><span class="symbol">        id:</span> focusItem</span><br><span class="line"><span class="symbol">        x:</span> focusRect.x</span><br><span class="line"><span class="symbol">        y:</span> focusRect.y</span><br><span class="line"><span class="symbol">        width:</span> focusRect.width</span><br><span class="line"><span class="symbol">        height:</span> focusRect.height</span><br><span class="line">        <span class="class">RadialGradient </span>&#123;</span><br><span class="line">            anchors.fill: parent</span><br><span class="line"><span class="symbol">            gradient:</span> <span class="class">Gradient </span>&#123;</span><br><span class="line">                <span class="class">GradientStop </span>&#123; position: <span class="number">0.0</span>; color: <span class="string">"transparent"</span> &#125;</span><br><span class="line">                <span class="class">GradientStop </span>&#123; position: <span class="number">0.6</span>; color: maskColor &#125;</span><br><span class="line">            &#125;</span><br><span class="line"><span class="symbol">            opacity:</span> maskOpacity / <span class="number">2</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//left</span></span><br><span class="line">    <span class="class">Rectangle </span>&#123;</span><br><span class="line"><span class="symbol">        x:</span> <span class="number">0</span></span><br><span class="line"><span class="symbol">        y:</span> <span class="number">0</span></span><br><span class="line"><span class="symbol">        width:</span> focusRect.x</span><br><span class="line"><span class="symbol">        height:</span> parent.height</span><br><span class="line"><span class="symbol">        color:</span> maskColor</span><br><span class="line"><span class="symbol">        opacity:</span> maskOpacity</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//right</span></span><br><span class="line">    <span class="class">Rectangle </span>&#123;</span><br><span class="line"><span class="symbol">        x:</span> focusRect.x + focusRect.width</span><br><span class="line"><span class="symbol">        y:</span> <span class="number">0</span></span><br><span class="line"><span class="symbol">        width:</span> pageItem.width - x</span><br><span class="line"><span class="symbol">        height:</span> parent.height</span><br><span class="line"><span class="symbol">        color:</span> maskColor</span><br><span class="line"><span class="symbol">        opacity:</span> maskOpacity</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//top</span></span><br><span class="line">    <span class="class">Rectangle </span>&#123;</span><br><span class="line"><span class="symbol">        x:</span> focusRect.x</span><br><span class="line"><span class="symbol">        width:</span> focusRect.width</span><br><span class="line"><span class="symbol">        y:</span> <span class="number">0</span></span><br><span class="line"><span class="symbol">        height:</span> focusRect.y</span><br><span class="line"><span class="symbol">        color:</span> maskColor</span><br><span class="line"><span class="symbol">        opacity:</span> maskOpacity</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//bottom</span></span><br><span class="line">    <span class="class">Rectangle </span>&#123;</span><br><span class="line"><span class="symbol">        x:</span> focusRect.x</span><br><span class="line"><span class="symbol">        width:</span> focusRect.width</span><br><span class="line"><span class="symbol">        y:</span> focusRect.y + focusRect.height</span><br><span class="line"><span class="symbol">        height:</span> pageItem.height - y</span><br><span class="line"><span class="symbol">        color:</span> maskColor</span><br><span class="line"><span class="symbol">        opacity:</span> maskOpacity</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="class">Row </span>&#123;</span><br><span class="line"><span class="symbol">        id:</span> leftRow</span><br><span class="line"><span class="symbol">        spacing:</span> <span class="number">10</span></span><br><span class="line"><span class="symbol">        visible:</span> pageType === pageTypeLeft</span><br><span class="line"><span class="symbol">        z:</span> <span class="number">998</span></span><br><span class="line">        <span class="class">anchors </span>&#123;</span><br><span class="line"><span class="symbol">            left:</span> focusItem.right</span><br><span class="line"><span class="symbol">            leftMargin:</span> <span class="number">5</span></span><br><span class="line"><span class="symbol">            verticalCenter:</span> focusItem.verticalCenter</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="class">CusImage </span>&#123;</span><br><span class="line"><span class="symbol">            source:</span> CusConfig.imagePathPrefix + <span class="string">"arrow-left.png"</span></span><br><span class="line">            anchors.verticalCenter: parent.verticalCenter</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="class">Row </span>&#123;</span><br><span class="line"><span class="symbol">        id:</span> rightRow</span><br><span class="line"><span class="symbol">        spacing:</span> <span class="number">10</span></span><br><span class="line"><span class="symbol">        layoutDirection:</span> Qt.RightToLeft</span><br><span class="line"><span class="symbol">        visible:</span> pageType === pageTypeRight</span><br><span class="line"><span class="symbol">        z:</span> <span class="number">998</span></span><br><span class="line">        <span class="class">anchors </span>&#123;</span><br><span class="line"><span class="symbol">            right:</span> focusItem.left</span><br><span class="line"><span class="symbol">            rightMargin:</span> <span class="number">5</span></span><br><span class="line"><span class="symbol">            verticalCenter:</span> focusItem.verticalCenter</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="class">CusImage </span>&#123;</span><br><span class="line"><span class="symbol">            source:</span> CusConfig.imagePathPrefix + <span class="string">"arrow-right.png"</span></span><br><span class="line">            anchors.verticalCenter: parent.verticalCenter</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="class">Column </span>&#123;</span><br><span class="line"><span class="symbol">        id:</span> downColumn</span><br><span class="line"><span class="symbol">        spacing:</span> <span class="number">10</span></span><br><span class="line"><span class="symbol">        visible:</span> pageType === pageTypeDown</span><br><span class="line"><span class="symbol">        width:</span> <span class="number">300</span></span><br><span class="line"><span class="symbol">        z:</span> <span class="number">998</span></span><br><span class="line">        <span class="class">anchors </span>&#123;</span><br><span class="line"><span class="symbol">            bottom:</span> focusItem.top</span><br><span class="line"><span class="symbol">            bottomMargin:</span> <span class="number">5</span></span><br><span class="line"><span class="symbol">            horizontalCenter:</span> focusItem.horizontalCenter</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="class">CusImage </span>&#123;</span><br><span class="line"><span class="symbol">            source:</span> CusConfig.imagePathPrefix + <span class="string">"arrow-down.png"</span></span><br><span class="line">            anchors.horizontalCenter: parent.horizontalCenter</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="class">Column </span>&#123;</span><br><span class="line"><span class="symbol">        id:</span> upColumn</span><br><span class="line"><span class="symbol">        spacing:</span> <span class="number">10</span></span><br><span class="line"><span class="symbol">        visible:</span> pageType === pageTypeUp</span><br><span class="line"><span class="symbol">        width:</span> <span class="number">300</span></span><br><span class="line"><span class="symbol">        z:</span> <span class="number">998</span></span><br><span class="line">        <span class="class">anchors </span>&#123;</span><br><span class="line"><span class="symbol">            top:</span> focusItem.bottom</span><br><span class="line"><span class="symbol">            topMargin:</span> <span class="number">5</span></span><br><span class="line"><span class="symbol">            horizontalCenter:</span> focusItem.horizontalCenter</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="class">CusImage </span>&#123;</span><br><span class="line"><span class="symbol">            source:</span> CusConfig.imagePathPrefix + <span class="string">"arrow-up.png"</span></span><br><span class="line">            anchors.horizontalCenter: parent.horizontalCenter</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="class">CusLabel </span>&#123;</span><br><span class="line"><span class="symbol">        id:</span> wizardDescriptLabel</span><br><span class="line"><span class="symbol">        z:</span> <span class="number">998</span></span><br><span class="line"><span class="symbol">        text:</span> qsTr(wizardDescript) + CusConfig.transString</span><br><span class="line">        font.pixelSize: <span class="number">16</span></span><br><span class="line"><span class="symbol">        color:</span> <span class="string">"white"</span></span><br><span class="line">        <span class="class">anchors </span>&#123;</span><br><span class="line"><span class="symbol">            horizontalCenter:</span> parent.horizontalCenter</span><br><span class="line"><span class="symbol">            verticalCenter:</span> parent.verticalCenter</span><br><span class="line"><span class="symbol">            verticalCenterOffset:</span> <span class="number">50</span></span><br><span class="line"><span class="symbol">            horizontalCenterOffset:</span> <span class="number">-50</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="class">CusLabel </span>&#123;</span><br><span class="line"><span class="symbol">        z:</span> <span class="number">998</span></span><br><span class="line"><span class="symbol">        text:</span> qsTr(wizardName) +  CusConfig.transString</span><br><span class="line">        font.pixelSize: <span class="number">26</span></span><br><span class="line"><span class="symbol">        color:</span> <span class="string">"white"</span></span><br><span class="line">        <span class="class">anchors </span>&#123;</span><br><span class="line"><span class="symbol">            left:</span> wizardDescriptLabel.left</span><br><span class="line"><span class="symbol">            bottom:</span> wizardDescriptLabel.top</span><br><span class="line"><span class="symbol">            bottomMargin:</span> <span class="number">30</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="向导组件"><a href="#向导组件" class="headerlink" title="向导组件"></a>向导组件</h5><p>向导一般不止一页，而是很多页，这里就封装了一个向导组件。</p>
<p>使用model-view的方式,数据源由外部设置，组件只管按照model去实例化对应的向导页即可</p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//CusWizard.qml</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> QtQuick <span class="number">2.9</span></span><br><span class="line"><span class="keyword">import</span> QtQuick.Controls <span class="number">2.2</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">".."</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">"../.."</span></span><br><span class="line"></span><br><span class="line"><span class="title">Item</span> &#123;</span><br><span class="line">    <span class="attribute">id:</span><span class="string"> cusWizardItem</span></span><br><span class="line">    <span class="keyword">signal</span><span class="string"> wizardFinished</span></span><br><span class="line">    <span class="keyword">property</span><span class="string"> string totlaString</span>: qsTr(<span class="string">"Wizard %1/%2 &gt;"</span>).arg(currentIndex + <span class="number">1</span>).arg(count) + CusConfig.transString</span><br><span class="line">    <span class="keyword">property</span><span class="string"> string operatorString</span>: qsTr(<span class="string">"Click any area to show next"</span>) + CusConfig.transString</span><br><span class="line">    <span class="title">MouseArea</span> &#123;</span><br><span class="line">        <span class="attribute">anchors.fill</span>: <span class="built_in">parent</span></span><br><span class="line">        <span class="attribute">hoverEnabled</span>: <span class="literal">true</span></span><br><span class="line">        <span class="attribute">onClicked</span>: &#123;</span><br><span class="line">            currentIndex++</span><br><span class="line">            <span class="keyword">if</span> (currentIndex &gt;= count) &#123;</span><br><span class="line">                wizardFinished()</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">property</span><span class="string"> var model</span></span><br><span class="line">    <span class="keyword">property</span><span class="string"> int count</span>: model.count</span><br><span class="line">    <span class="keyword">property</span><span class="string"> int currentIndex</span>: <span class="number">0</span></span><br><span class="line">    <span class="title">Repeater</span> &#123;</span><br><span class="line">        <span class="attribute">model</span>: cusWizardItem.model</span><br><span class="line">        <span class="attribute">delegate</span>: <span class="title">CusWizardPage</span> &#123;</span><br><span class="line">            <span class="attribute">anchors.fill</span>: <span class="built_in">parent</span></span><br><span class="line">            <span class="attribute">visible</span>: index === currentIndex</span><br><span class="line">            <span class="attribute">wizardName</span>: model.name</span><br><span class="line">            <span class="attribute">wizardDescript</span>: model.descript</span><br><span class="line">            <span class="attribute">targetObjectName</span>: model.targetObjectName</span><br><span class="line">            <span class="attribute">pageType</span>: model.arrowType</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">CusLabel</span> &#123;</span><br><span class="line">        <span class="attribute">z</span>: <span class="number">999</span></span><br><span class="line">        <span class="attribute">id:</span><span class="string"> centerLabel</span></span><br><span class="line">        <span class="title">anchors</span> &#123;</span><br><span class="line">            <span class="attribute">centerIn</span>: <span class="built_in">parent</span></span><br><span class="line">            <span class="attribute">horizontalCenterOffset</span>: <span class="number">300</span></span><br><span class="line">            <span class="attribute">verticalCenterOffset</span>: <span class="number">150</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="attribute">text</span>: totlaString</span><br><span class="line">        <span class="attribute">font.pixelSize</span>: <span class="number">22</span></span><br><span class="line">        <span class="attribute">color</span>: <span class="string">"white"</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">CusLabel</span> &#123;</span><br><span class="line">        <span class="attribute">z</span>: <span class="number">999</span></span><br><span class="line">        <span class="title">anchors</span> &#123;</span><br><span class="line">            <span class="attribute">centerIn</span>: <span class="built_in">parent</span></span><br><span class="line">            <span class="attribute">horizontalCenterOffset</span>: <span class="number">300</span></span><br><span class="line">            <span class="attribute">verticalCenterOffset</span>: <span class="number">150</span> + centerLabel.height</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="attribute">text</span>: operatorString</span><br><span class="line">        <span class="attribute">color</span>: <span class="string">"white"</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="向导数据源"><a href="#向导数据源" class="headerlink" title="向导数据源"></a>向导数据源</h5><p>最后来看一下，TaoQuick项目的首页，提供的向导数据model</p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="title">ListModel</span> &#123;</span><br><span class="line">    <span class="attribute">id:</span><span class="string">wizardModel</span></span><br><span class="line">    <span class="title">ListElement</span> &#123;</span><br><span class="line">        <span class="attribute">name</span>: <span class="string">"TitleBar"</span></span><br><span class="line">        <span class="attribute">descript</span>: <span class="string">"drag change window pos, double click change window state"</span></span><br><span class="line">        <span class="attribute">targetObjectName</span>: <span class="string">"blankItem"</span></span><br><span class="line">        <span class="attribute">arrowType</span>: Qt.UpArrow</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">ListElement</span> &#123;</span><br><span class="line">        <span class="attribute">name</span>: <span class="string">"Control Buttons"</span></span><br><span class="line">        <span class="attribute">descript</span>: <span class="string">"minimize, maximize, normal or close main window"</span></span><br><span class="line">        <span class="attribute">targetObjectName</span>: <span class="string">"controlButtonsRow"</span></span><br><span class="line">        <span class="attribute">arrowType</span>: Qt.UpArrow</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">ListElement</span> &#123;</span><br><span class="line">        <span class="attribute">name</span>: <span class="string">"Skin Button"</span></span><br><span class="line">        <span class="attribute">descript</span>: <span class="string">"switch theme"</span></span><br><span class="line">        <span class="attribute">targetObjectName</span>: <span class="string">"skinBtn"</span></span><br><span class="line">        <span class="attribute">arrowType</span>: Qt.UpArrow</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">ListElement</span> &#123;</span><br><span class="line">        <span class="attribute">name</span>: <span class="string">"Language Button"</span></span><br><span class="line">        <span class="attribute">descript</span>: <span class="string">"switch language"</span></span><br><span class="line">        <span class="attribute">targetObjectName</span>: <span class="string">"langBtn"</span></span><br><span class="line">        <span class="attribute">arrowType</span>: Qt.UpArrow</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">ListElement</span> &#123;</span><br><span class="line">        <span class="attribute">name</span>: <span class="string">"Left Pane"</span></span><br><span class="line">        <span class="attribute">descript</span>: <span class="string">"show content list"</span></span><br><span class="line">        <span class="attribute">targetObjectName</span>: <span class="string">"leftPane"</span></span><br><span class="line">        <span class="attribute">arrowType</span>: Qt.LeftArrow</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">ListElement</span> &#123;</span><br><span class="line">        <span class="attribute">name</span>: <span class="string">"Drawer Button"</span></span><br><span class="line">        <span class="attribute">descript</span>: <span class="string">"show or hide left pane"</span></span><br><span class="line">        <span class="attribute">targetObjectName</span>: <span class="string">"menuBtn"</span></span><br><span class="line">        <span class="attribute">arrowType</span>: Qt.LeftArrow</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">ListElement</span> &#123;</span><br><span class="line">        <span class="attribute">name</span>: <span class="string">"Search Input"</span></span><br><span class="line">        <span class="attribute">descript</span>: <span class="string">"search content"</span></span><br><span class="line">        <span class="attribute">targetObjectName</span>: <span class="string">"searchInput"</span></span><br><span class="line">        <span class="attribute">arrowType</span>: Qt.LeftArrow</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">ListElement</span> &#123;</span><br><span class="line">        <span class="attribute">name</span>: <span class="string">"Home Button"</span></span><br><span class="line">        <span class="attribute">descript</span>: <span class="string">"go back home page"</span></span><br><span class="line">        <span class="attribute">targetObjectName</span>: <span class="string">"homeBtn"</span></span><br><span class="line">        <span class="attribute">arrowType</span>: Qt.LeftArrow</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">ListElement</span> &#123;</span><br><span class="line">        <span class="attribute">name</span>: <span class="string">"Content List"</span></span><br><span class="line">        <span class="attribute">descript</span>: <span class="string">"switch content"</span></span><br><span class="line">        <span class="attribute">targetObjectName</span>: <span class="string">"contentListView"</span></span><br><span class="line">        <span class="attribute">arrowType</span>: Qt.LeftArrow</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">ListElement</span> &#123;</span><br><span class="line">        <span class="attribute">name</span>: <span class="string">"Content Pane"</span></span><br><span class="line">        <span class="attribute">descript</span>: <span class="string">"show current selected content by list"</span></span><br><span class="line">        <span class="attribute">targetObjectName</span>: <span class="string">"contentRect"</span></span><br><span class="line">        <span class="attribute">arrowType</span>: Qt.RightArrow</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">ListElement</span> &#123;</span><br><span class="line">        <span class="attribute">name</span>: <span class="string">"Tool Buttons"</span></span><br><span class="line">        <span class="attribute">descript</span>: <span class="string">"special function buttons such as Wizard, View Source Code and so on"</span></span><br><span class="line">        <span class="attribute">targetObjectName</span>: <span class="string">"wizardBtn"</span></span><br><span class="line">        <span class="attribute">arrowType</span>: Qt.RightArrow</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>







    </div>
    
    <div class="reward" ontouchstart>
    <div class="reward-wrap">赏
        <div class="reward-box">
            
            <span class="reward-type">
                <img class="alipay" src="/img/zhifubao.jpg"><b>支付宝打赏</b>
            </span>
            
            
            <span class="reward-type">
                <img class="wechat" src="/img/weixin.jpg"><b>微信打赏</b>
            </span>
            
        </div>
    </div>
    <p class="reward-tip">
        为众人抱薪者,不可使其冻毙于霜雪
    </p>
</div>
    
    <div class="post-footer">
        <div>
            
            转载声明：
            文章采用<a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>进行许可, 转载请注明出处 © <a href="https://jaredtao.github.io" target="_blank">武威的涛哥</a>
            
            
        </div>
        <div>
            
        </div>
    </div>
</article>
<div class="article-nav prev-next-wrap clearfix">
    
    <a href="/2020/11/30/QQuickWidget%E4%B8%AD%E6%96%87%E8%BE%93%E5%85%A5%E6%B3%95%E9%97%AE%E9%A2%98%E7%9A%84%E6%AD%A3%E7%A1%AE%E8%A7%A3%E6%B3%95/" class="pre-post btn btn-default" title='QQuickWidget中文输入法问题的正确解法'>
        <i class="fa fa-angle-left fa-fw"></i><span class="hidden-lg">上一篇</span>
        <span class="hidden-xs">
            QQuickWidget中文输入法问题的正确解法</span>
    </a>
    
    
    <a href="/2020/06/15/%E7%8E%A9%E8%BD%ACQml(17)-%E6%A0%91%E7%BB%84%E4%BB%B6%E7%9A%84%E5%AE%9A%E5%88%B6/" class="next-post btn btn-default" title='玩转Qml(17)-树组件的定制'>
        <span class="hidden-lg">下一篇</span>
        <span class="hidden-xs">
            玩转Qml(17)-树组件的定制</span><i class="fa fa-angle-right fa-fw"></i>
    </a>
    
</div>

<div id="comments">
    

<div id="vcomments" class="valine"></div>

<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="/assets/valine.min.js"></script>

<script>
new Valine({
    av: AV,
    el: '#vcomments',
    appId: 'qegD4552u6FU9HoNDvRsonko-gzGzoHsz',
    appKey: 'eitB2FV5n2qyMHcDM7x6EQpt',
    placeholder: '说点什么吧',
    notify: false,
    verify: true,
    avatar: 'mm',
    meta: 'nick,mail'.split(','),
    pageSize: '10',
    path: window.location.pathname,
    lang: 'zh-CN'.toLowerCase()
})
</script>


</div>


                </main>
                
                    <aside id="article-toc" role="navigation" class="col-md-4">
    <div class="widget">
        <h3 class="title">
            文章目录
        </h3>
        
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#简介"><span class="toc-text">简介</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#效果预览"><span class="toc-text">效果预览</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#源码"><span class="toc-text">源码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#原理说明"><span class="toc-text">原理说明</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#需求说明"><span class="toc-text">需求说明</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#原理"><span class="toc-text">原理</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#Qml对象作用域"><span class="toc-text">Qml对象作用域</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#QObject对象树"><span class="toc-text">QObject对象树</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#实现"><span class="toc-text">实现</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#最小改动"><span class="toc-text">最小改动</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#获取焦点区域"><span class="toc-text">获取焦点区域</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#找到对象"><span class="toc-text">找到对象</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#取坐标"><span class="toc-text">取坐标</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#向导页"><span class="toc-text">向导页</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#向导组件"><span class="toc-text">向导组件</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#向导数据源"><span class="toc-text">向导数据源</span></a></li></ol></li></ol></li></ol></li></ol>
        
    </div>
</aside>
                
            </div>
        </div>
    </section>
    <footer class="main-footer">
    <div class="container">
        <div class="row">
        </div>
    </div>
</footer>
<a id="back-to-top" class="icon-btn hide">
    <i class="fa fa-chevron-up"></i>
</a>
    <div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="busuanzi">
    
    访问量:
    <strong id="busuanzi_value_site_pv">
        <i class="fa fa-spinner fa-spin"></i>
    </strong>
    &nbsp; | &nbsp;
    访客数:
    <strong id="busuanzi_value_site_uv">
        <i class="fa fa-spinner fa-spin"></i>
    </strong>
    
</div>
            </div>
            <div class="col-sm-12">
                <span>Copyright &copy;
                    2019
                    
                </span> |
                <span>
                    Powered by <a href="//hexo.io" class="copyright-links" target="_blank" rel="nofollow">Hexo</a>
                </span> |
                <span>
                    Theme by <a href="//github.com/shenliyang/hexo-theme-snippet.git" class="copyright-links" target="_blank" rel="nofollow">Snippet</a>
                </span>
            </div>
        </div>
    </div>
</div>



<script src="/assets/tagcanvas.min.js?rev=2.9.js"></script>

<script>
var tagOption = {
    textColour: '#444', // 字体颜色
    outlineMethod: 'block', // 选中模式
    outlineColour: '#FFDAB9', // 选中模式的颜色
    interval: 30 || 30, // 动画帧之间的时间间隔，值越大，转动幅度越大
    textHeight: 13,
    outlineRadius: 3,
    freezeActive: true || '', // 选中的标签是否继续滚动
    frontSelect: true || '', // 不选标签云后部的标签
    initial: [0.1, -0.1],
    depth: 0.5,
    decel: 0.95,
    maxSpeed: 0.03,
    reverse: true || '', // 是否反向触发
    fadeIn: 500, // 进入动画时间
    wheelZoom: false || '' // 是否启用鼠标滚轮
}
TagCanvas.Start('tag-cloud-3d', '', tagOption);
</script>


<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>


<script src="/js/app.js?rev=@@hash.js"></script>

</body>
</html>